<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>家庭成员</title>
    <link rel="icon" type="image/png" href="/img/icon.png">
    <script type="text/javascript" src="/h5/newall/newall.js"></script>
    <link rel="stylesheet" type="text/css" href="/h5/newall/newall.css">
</head>

<div class="mui-content-padded H5body basedata">
    <div class="topmsg">
        <p class="msgtext">注册填写/上传的信息越全面，客户信任度越高</p>
    </div>
    <MCform id="Form" class="mctag">
        <MCtitle class="mctag" subtitle="新增" subtitleOn="onNewli()">家庭成员</MCtitle>
        <div mcname="jiatingchengyuanArray" v-for="(obj,key) in jiatingchengyuanArray" class="content" v-bind:class="{newli:obj.newli}">

            <h4 name="title" class="title">成员{{key+1}}</h4>
            <a class="red btn">删除</a>
            <ul class="baseul">
                <li class="li">
                    <p class="title">姓名</p>
                    <input type="text" placeholder="请输入"
                           v-model="obj.name" name="name"
                           class="mui-input">
                </li>
                <li class="li">
                    <p class="title">称谓</p>
                    <input type="text" placeholder="请输入"
                           v-model="obj.chengwei" name="chengwei"
                           class="mui-input">
                </li>
                <li class="li">
                    <p class="title">工作单位</p>
                    <input type="text" placeholder="请输入"
                           v-model="obj.gongzuodanwei" name="gongzuodanwei"
                           class="mui-input">
                </li>
                <li class="li">
                    <p class="title">联系电话</p>
                    <input type="text" placeholder="请输入"
                           v-model="obj.phone" name="phone"
                           class="mui-input">
                </li>


            </ul>
        </div>
        <button id="submit" type="submit"
                class="mui-btn mui-btn-primary" >
            保存
        </button>



    </MCform>
</div>

<script type="text/javascript" src="/h5/js/all2.js"></script>
</body>
<style>
    .mctag .content.newli {
        background-color: rgb(222 248 255);
    }

    MCform .content.newli .li mcselect.mctag {
        background-color: rgb(222 248 255);
    }

    MCform .content.newli .li .mui-input {
        background-color: rgb(222 248 255);
    }

    .mctag .content {
        position: relative;
    }

    .mctag .content .red {
        position: absolute;
        top: 0.2rem;
        right: 0;
        font-size: 0.16rem;
    }
</style>
<script>
    var view = new MC.View.MCform('#Form');
    MC.apiD('getuser_jiatingchengyuan_gr', {}, function (json) {
        console.log(json);
        if (json.jiatingchengyuanArray == null || json.jiatingchengyuanArray.length == 0) {
            json.jiatingchengyuanArray = [{
                name: "",
                chengwei: '',
                gongzuodanwei: '',
                phone: '',
            }];
        }
        view.vue.jiatingchengyuanArray = json.jiatingchengyuanArray;
        setTimeout(function () {
            view.createEvent();
        }, 2);
    });

    function onNewli() {
        tongbutoview(function () {
                var newlist = {
                    newli: 'newli',
                    name: "",
                    chengwei: '',
                    gongzuodanwei: '',
                    phone: '',
                };
                view.vue.jiatingchengyuanArray.push(newlist);
                console.log('onNewli()');

                setTimeout(function () {
                    $("html").scrollTop($("html")[0].scrollHeight);
                    $("body").scrollTop($("body")[0].scrollHeight);
                    view.createEvent();
                    setTimeout(function () {
                        $("html").scrollTop($("html")[0].scrollHeight);
                        $("body").scrollTop($("body")[0].scrollHeight);
                        newlist.newli = '';
                    }, 800);
                }, 10);
            }
        );
    }

    function tongbutoview(fun) {
        var jiatingchengyuanArray = $('#Form [mcname=jiatingchengyuanArray]');
        var list = [];
        for (var i = 0; i < jiatingchengyuanArray.length; i++) {
            var one = $(jiatingchengyuanArray[i]);
            var name = one.find('[name=name]').val();
            var chengwei = one.find('[name=chengwei]').val();
            var gongzuodanwei = one.find('[name=gongzuodanwei]').val();
            var phone = one.find('[name=phone]').val();

            list.push({
                title: one.find('[name=title]').text(),
                name: name,
                chengwei: chengwei,
                gongzuodanwei: gongzuodanwei,
                phone: phone,
            });
        }
        view.vue.jiatingchengyuanArray = [];
        setTimeout(function () {
            view.vue.jiatingchengyuanArray = list;
            setTimeout(function () {
                fun && fun();
            }, 100);

        }, 10);
    }

    $('.mctag').on('click', '.content .red', function () {
        var content = $(this).parents('.content');
        var title = content.find('[name=title]').text();
        MC.msg.confirm("是否删除(" + title + ")?", function () {
            content.remove();
            // content.add
            setTimeout(function () {
                tongbutoview(function(){
                    view.createEvent();
                });
            }, 100);
        });
    });

    $('#submit').on('click', function () {
        tongbutoview(function () {
            view.createEvent();
            for (var i = 0; i < view.vue.jiatingchengyuanArray.length; i++) {
                var one = view.vue.jiatingchengyuanArray[i];
                one.title = '(' + one.title + ')';
                if (!one.name || one.name == '') {
                    return MC.msg.alert(one.title + "的姓名必须填写");
                }
                if (!one.chengwei || one.chengwei == '') {
                    return MC.msg.alert(one.title + "的称谓必须填写");
                }
                if (!one.gongzuodanwei || one.gongzuodanwei == '') {
                    return MC.msg.alert(one.title + "的工作单位必须填写");
                }
                if (!one.phone || one.phone == '') {
                    return MC.msg.alert(one.title + "的联系电话必须填写");
                }

            }
            var json = JSON.stringify(view.vue.jiatingchengyuanArray);

            console.log(json);
            MC.apiD('setuser_jiatingchengyuan_gr', {
                jiatingchengyuanArray: json
            }, function () {
                MC.msg.show('保存成功');
            });
        });
    });

</script>
</body>
</html>